<template>
  <div class="app-container">
    <el-row>
      <el-col :span="6">
        <div class="input-container">
          <div class="text-bold ">
            <el-button type="text" class="text-forestgreen" icon="el-icon-document-copy" @click="copyText(left,$event)">复制</el-button>
            原始数据:{{ handle.left.length }}
          </div>
          <el-input
            v-model="left"
            type="textarea"
            :rows="18"
            placeholder="原始数据"
            @blur="parseColumns($event)"
          />
        </div>
      </el-col>
      <el-col :span="6" class="margin-left">
        <div class="input-container">
          <div class="text-bold margin-little-bottom">
            <el-button type="text" class="text-forestgreen" icon="el-icon-document-copy" @click="copyText(right,$event)">复制</el-button>
            处理后数据:{{ handle.right.length }}
          </div>
          <el-input
            v-model="right"
            type="textarea"
            :rows="18"
            placeholder="处理后数据"
          />
        </div>
      </el-col>
      <el-col :span="9" class="margin-left">
        <el-form size="mini" inline>
          <el-form-item>
            <el-checkbox v-model="setting.delRepeat">去除重复数据</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="setting.trim">去空格</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-checkbox title="如果去空格选上了的话, 会先去空格再去空行" v-model="setting.delBlank">去空行</el-checkbox>
          </el-form-item>
        </el-form>

        <!-- 数据排序 -->
        <p class="text-bold">数据排序</p>
        <el-form size="mini" inline>
          <el-form-item>
            <el-checkbox v-model="setting.allIsNumber">纯数字</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="text" class="text-forestgreen margin-little-right" icon="el-icon-sort-up" @click="sort(true)" >升序</el-button>
            <el-button type="text" class="text-forestgreen margin-little-right" icon="el-icon-sort-down" @click="sort(false)" >降序</el-button>
          </el-form-item>
        </el-form>

        <!-- 纯操作实现 -->
        <el-button type="text" class="text-forestgreen margin-little-right" icon="el-icon-top" @click="capitalize">首字母大写</el-button>
        <el-button type="text" class="text-forestgreen margin-little-right" icon="el-icon-phone" title="只有当后台翻译模块可用时才有用" @click="translate">翻译</el-button>

        <p class="text-bold">
          <el-button size="small" type="text" class="text-forestgreen" icon="el-icon-thumb" @click="columnPad">行处理</el-button>
          前后缀
        </p>
        <el-form :inline="true">
          <el-form-item>
            <el-input v-model="setting.prefix" placeholder="前缀" size="small" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="setting.suffix" placeholder="后缀" size="small" />
          </el-form-item>
        </el-form>

        <p class="text-bold">
          <el-button size="small" type="text" class="text-forestgreen" icon="el-icon-thumb" @click="findAndReplace">行处理</el-button>
          查找与替换
        </p>
        <el-form inline>
          <el-form-item class="" style="display: block">
            <el-checkbox v-model="setting.replace.find">仅查找</el-checkbox>
            <el-checkbox v-model="setting.replace.regex">正则表达式</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-input v-model="setting.replace.before" placeholder="查找行" size="small" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="setting.replace.after" placeholder="替换" :disabled="setting.replace.find" size="small" />
          </el-form-item>
        </el-form>

        <el-form>
          <p class="text-bold">
            <el-button size="small" type="text" class="text-forestgreen" icon="el-icon-thumb" @click="dataCollect">行提取</el-button>
            数据提取
          </p>
          <el-form-item>
            <el-input v-model="setting.dataCollect.select.regex" size="small" placeholder="提取正则" class="input-with-select">
              <el-select slot="prepend" v-model="setting.dataCollect.select.label" style="width: 100px" placeholder="请选择" @change="choseSample">
                <el-option v-for="sample in samples" :key="sample.label" :label="sample.label" :value="sample.label" />
              </el-select>
              <el-select slot="append" v-model="setting.dataCollect.select.index" style="width: 60px" class="small" placeholder="正则分组">
                <el-option v-for="index in [0,1,2,3,4,5,6,7,8,9]" :key="'group'+index" :label="index" :value="index" />
              </el-select>
            </el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import clip from '@/utils/clipboard'
import {inArray} from '@/utils'

export default {
  name: 'Column',
  data() {
    return {
      left: null,
      right: null,
      handle: {
        left: [],
        right: []
      },
      setting: {
        trim: true,
        delBlank: true,
        allIsNumber: false,
        prefix: '',
        suffix: '',
        delRepeat: true,
        replace: {
          before: null,
          after: null,
          regex: true,
          find: true
        },
        dataCollect: {
          select: { regex: null, label: null, index: 0 },
          samples: {
            'Java属性': { pattern: /(private|protected)\s+\w+\s+(\w+);/, index: 2 },
            'Java 属性值': { pattern: /(private|protected|public).*?=\s*(.+?);/, index: 2 },
            'Java 公共属性': { pattern: /public.*?\s(\w+)\s=/, index: 1 },
            '文档注释': { pattern: /\* (.*?)\n/, index: 1 },
            '末尾注释': { pattern: /\/\/(.*)/, index: 1 },
            '末尾注释前面的': { pattern: /(.*)\/\//, index: 1 },
            '属性列': { pattern: /property="(\w+)"/, index: 1 },
            '数据库列': { pattern: /column="(\w+)"/, index: 1 },
            'temp': { pattern: /\w\.(\w+),/, index: 1 },
            '表列': { pattern: /"(\w+)"\s.*/, index: 1 },
            '表列类型': { pattern: /"(\w+)"\s(\w+).*/, index: 2 },
            '表列注释': { pattern: /\'(.+)\';/, index: 1 },
            'hibernatesql': { pattern: /"(.+)"/, index: 1 },
            'aliassql': { pattern: /(\w+),/, index: 1 },
            '注释提取': { pattern: /value\s+=\s+"(.+)"/, index: 1 },
            '类型提取': { pattern: /(private|protected)\s+(\w+)/, index: 2 }
          }
        }
      }
    }
  },
  computed: {
    samples() {
      const samples = []
      for (const label in this.setting.dataCollect.samples) {
        samples.push({ label: label, value: this.setting.dataCollect.samples[label].pattern })
      }
      return samples
    }
  },
  methods: {
    copyText(text, event) {
      clip(text, event)
    },
    choseSample(val) {
      const dataCollect = this.setting.dataCollect
      if (dataCollect.samples[val]) {
        dataCollect.select.regex = dataCollect.samples[val].pattern.source
        dataCollect.select.index = dataCollect.samples[val].index
      }
    },
    parseColumns(event) {
      const value = event.target.value.trim().split('\n')

      const handleValue = []
      for (let i = 0; i < value.length; i++) {
        let item = value[i]
        if (this.setting.trim) {
          item = item.trim()
        }
        if (item && this.setting.delBlank) {
          handleValue.push(item)
        }else {
          handleValue.push(item)
        }
      }

      this.handle['left'] = handleValue
    },
    handleRepeat() {
      let rightDatas = this.handle.left

      if (this.setting.delRepeat) {
        // 去除重复数据
        const afterResult = []
        for (let i = 0; i < this.handle.left.length; i++) {
          const item = this.handle.left[i]
          if (inArray(item, afterResult) !== -1) {
            continue
          }
          afterResult.push(item)
        }
        rightDatas = afterResult
      }
      return rightDatas
    },

    // 前后追加内容
    columnPad() {
      const rightDatas = this.handleRepeat()

      // 前后缀操作
      if (this.setting.prefix || this.setting.suffix) {
        for (let i = 0; i < rightDatas.length; i++) {
          rightDatas[i] = this.setting.prefix + rightDatas[i] + this.setting.suffix
        }
      }

      this.handle.right = rightDatas
      this.right = rightDatas.join('\n')
    },
    // 查找和替换
    findAndReplace() {
      let rightDatas = this.handleRepeat()

      // 数据行处理
      if (this.setting.replace.before) {
        const handleResult = []
        if (this.setting.replace.find) {
          // 仅查询操作 ,将查询出的结果显示即可
          for (let i = 0; i < rightDatas.length; i++) {
            const item = rightDatas[i]
            if (!this.setting.replace.regex && item.contains(this.setting.replace.before)) {
              handleResult.push(item)
            } else if (this.setting.replace.regex) {
              const regex = new RegExp(this.setting.replace.before)
              if (regex.test(item)) {
                handleResult.push(item)
              }
            }
          }
        } else {
          // 需要替换的情况
          for (let i = 0; i < rightDatas.length; i++) {
            const item = rightDatas[i]
            if (!this.setting.replace.regex && item.contains(this.setting.replace.before)) {
              handleResult.push(item.replaceAll(this.setting.replace.before, this.setting.replace.after))
            } else if (this.setting.replace.regex && new RegExp(this.setting.replace.before).test(item)) {
              this.$message('正则替换暂不支持')
            }
          }
        }
        rightDatas = handleResult
      }

      this.handle.right = rightDatas
      this.right = rightDatas.join('\n')
    },
    // 数据提取功能
    dataCollect() {
      const rightDatas = this.handleRepeat()

      const finalDatas = []
      for (let i = 0; i < rightDatas.length; i++) {
        const item = rightDatas[i]
        const regExpExecArray = new RegExp(this.setting.dataCollect.select.regex).exec(item)
        if (regExpExecArray && regExpExecArray.length > this.setting.dataCollect.select.index) {
          const group = regExpExecArray[this.setting.dataCollect.select.index]
          finalDatas.push(group)
        }
      }

      this.handle.right = finalDatas
      this.right = finalDatas.join('\n')
    },
    // 数据排序功能
    sort(asc){
      const rightDatas = this.handleRepeat()

      if (!this.setting.allIsNumber){
        rightDatas.sort((a,b) => asc ? a.localeCompare(b) : b.localeCompare(a))
      }else{
        rightDatas.sort((a,b) => asc ? (parseInt(a) - parseInt(b)) : (parseInt(b) - parseInt(a)));
      }

      this.handle.right = rightDatas
      this.right = rightDatas.join('\n')
    },
    // 首字母大写
    capitalize(){
      const rightDatas = this.handleRepeat()

      let handleDatas = [];
      for (let i = 0; i < rightDatas.length; i++) {
        let item = rightDatas[i];
        if (item){
          let newItem = item[0].toUpperCase() + item.substr(1)
          handleDatas.push(newItem)
        }
      }

      this.handle.right = handleDatas
      this.right = handleDatas.join('\n')
    },
    // 行翻译功能
    translate(){
      this.$message('暂不支持')
    }
  }
}
</script>

<style scoped>
/deep/ .input-container textarea{
  white-space: nowrap;
  overflow: scroll;
}
</style>
